<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.min.js"></script>
    <style>
        ul {
            display: flex;
            list-style: none;
        }
        ul li {
            margin-right: 50px;
        }
    </style>
</head>
<body>
    
<!-- <div>1</div>
<div>2</div>
<div>3</div> -->
<div>
<ul></ul>

</div>
<script>
    $(function() {
       
        // 1. 定义数据
        var data = {
              ids: "20180701",
              address: "北京市昌平西路金燕龙写字楼",
              zid:"1000001"}
        // 2 遍历数据创建小 li 并追加到ul 里面
        for(var i in data){
              console.dir(data[i]);
              $("ul").prepend("<li> " + data[i] +" </li>").find("li").addClass("col")
        }
        // 3.  在ul 最后面添加一个li 
        $("ul").append("<li></li>").find("li:last").addClass("icon-location");
        // 4. 定义行 并追加到div 中
        var rows = $("ul").clone(true)
        $("div").append(rows)
        
    })
</script>
</body>
</html>